$(function(){
    //实现选项卡的效果
    $('.nav>li').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        $('.box>li').removeClass('active').eq($(this).index()).addClass('active')
    
        switch ($(this).index()) {
            case 0: getUserList(); break;
            case 1: getBannerList(); break
          }
    })

    //进行登录验证
    //拿到sessionStorage内的信息
    const token=window.sessionStorage.getItem('token')
    const id=window.sessionStorage.getItem('id')
    testLogin()
    async function testLogin(){
        //判断token和id是否存在
        if(!token||!id) return window.location.href='../pages/login.html'

        //发送请求 请求个人用户信息
        const res=await $.ajax({
            url:'http://localhost:9999/users/info/'+id,
            headers:{authorization:token}
        })

        //有可能失败有可能成功
        // console.log(res);
        if(res.code===1){
           $('.nickname').text(res.info.nickname)
           //页面逻辑启动
            init()
            return
        }
        window.location.href='./login.html'

    }
   //页面逻辑启动函数
   function init(){
       //获取轮播图列表函数
    //    getBannerList()
       //获取用户列表
       getUserList()
   }



   //==========轮播图管理相关================
   //获取轮播图列表
   async function getBannerList(){
    //直接发送请求获取轮播图列表
    const res=await $.ajax({url:'http://localhost:9999/banner/list',headers:{authorization:token}})
    // 使用模板渲染表格
    $('.banner_list>tbody').html(template('list_template',{list:res.list}))
    console.log(res);
  }
  //input type=file改变的时候触发的事件
  $('.banner .form input[type=file]').on('change',function(){
    //  console.log($(this));
    const fileInfo=this.files[0]
    if(!fileInfo) return
    if(fileInfo.type.split('/')[0]!=='image') return this.value=''

    const fr=new FileReader()
    fr.readAsDataURL(fileInfo)
    fr.onload=res=>{
        //展示图片
        $(this).prev().css('background-image',`url(${res.currentTarget.result})`)
    }
  })
  //点击确定按钮上传
  $('.banner>.add').on('submit',async e=>{
      e.preventDefault()
      //利用formdata获取表单信息
      const fm=new FormData($('form')[0])
      //发送ajax请求上传
      const res=await $.ajax({
          url:'http://localhost:9999/banner/add',
          method:'put',
          data:fm,
          processData:false,
          contentType:false,
          headers:{authorization:token}
      })
      if(res.code===0) return alert(res.message)
      if(res.code===1) {
          alert('添加轮播图成功')
          getBannerList()
          $('form')[0].reset()
          $('.banner .add .show div')[0].style.backgroundImage=''
      }
      
  })
  //删除一个轮播图事件
  $('.banner tbody').on('click','.del',async function(){
      if(!window.confirm('你想好了哈?不许反悔!!'))return
      //发送删除请求
      const res=await $.ajax({
          url:'http://localhost:9999/banner/remove/'+this.dataset.id,
          method:'delete',
          headers:{authorization:token}
      })
    //   console.log(res);
    if(res.code===0) return alert(res.message)
    if(res.code===1) {
        alert('删除成功')
        getBannerList()
        return
    }
      
  })
  //进入编辑状态
  $('.banner tbody').on('click','.edit',async function(){
  //根据id获取详细信息
  const res=await $.ajax({
    url:'http://localhost:9999/banner/info/'+this.dataset.id,
    method:'get',
    headers:{authorization:token}
   })
//    console.log(res);
 if(res.code!==1) return
 //拿到信息进行填充
 $('.banner>.edit .title').val(res.info.title)
 $('.banner>.edit .link').val(res.info.link)
 $('.banner>.edit .show div').css('background-image',`url(http://localhost:9999${res.info.img_url})`)
 $('.banner>.edit .update').attr('data-id',res.info.id)
 $('.banner>.edit').show()
 $('.banner>.add').hide()

  
})
 //取消编辑状态
 $('.banner> .edit .cancel').on('click',()=>{
     $('.banner > .edit')[0].reset()
     $('.banner > .edit .show div')[0].style.backgroundImage=''
     $('.banner > .edit').hide()
     $('.banner > .add').show()
 })
 //确认编辑
 $('.banner> .edit').on('submit',async e=>{
     e.preventDefault()

      //利用formdata获取表单信息
      const fm=new FormData($('.banner> .edit ')[0])
      fm.append('id', $('.banner> .edit .update')[0].dataset.id)
      //发送ajax请求上传
      const res=await $.ajax({
          url:'http://localhost:9999/banner/update',
          method:'patch',
          data:fm,
          processData:false,
          contentType:false,
          headers:{authorization:token}
      })
      if(res.code===0) return alert(res.message)
      if(res.code===1) {
          alert('修改轮播图成功')
          getBannerList()
          $('.banner> .edit .cancel').trigger('click')
         
      }
    //  console.log('确认编辑');
 })
   //==========用户列表管理相关================
   //准备一个变量保存获取列表的信息
   const list_info= {
       current:1,
       pagesize:10,
       is_status:'all',
       gender:'all',
       search:''
   }
   //获取列表信息
   async function getUserList(){
    //    console.log('success');
    const res=await $.ajax({
        url:'http://localhost:9999/person/list',
        headers:{authorization:token},
        data:list_info
    })
    console.log(res);
    
     // 根据 res 来渲染页面列表
     $('.users tbody').html(template('users_template', { list: res.list }))

     // 根据 res 来渲染页面分页器
     $('.users .pagination').html(template('users_pagination', { list_info, list: res.list, total: res.totalPage }))
 
     // 根据 res 来渲染筛选框
     $('.users .filter_box').html(template('users_filter', { list_info }))  
   }
   //事件委托，实现分页器的效果
   $('.users .pagination').on('click',e=>{
       let t=e.target
       //下一页
       if(t.className==='next'){
           list_info.current++
           getUserList()
       }
       //上一页
       if(t.className==='prev'){
        list_info.current--
        getUserList()
       }
       //首页
       if(t.className==='first'){
        list_info.current=1
        getUserList()
       }
       //尾页
       if(t.className==='last'){
        list_info.current=t.dataset.total-0
        getUserList()
       }
       //某页
       if(t.className==='item'){
        list_info.current=t.innerText-0
        getUserList()
       }
       //跳转
       if(t.className==='go'){
           let page=$(t).prev().val()-0
           if(page<=1||isNaN(page)) page=1
           if(page>=t.dataset.total-0) page=t.dataset.total-0
           page=parseInt(page)
            list_info.current=page
            getUserList()
       }
       
       
   })
   //事件委托，实现筛选效果
   $('.users .filter_box').on('click','button',()=>{
       list_info.search=$('.users .filter_box').find('.search').val()
       list_info.gender=$('.users .filter_box').find('.gender').val()
       list_info.pagesize=$('.users .filter_box').find('.pagesize').val()
       list_info.is_status=$('.users .filter_box').find('.status').val()
    //   console.log(list_info);
       getUserList()
    })
    //事件委托，修改用户的状态
    $('.users table tbody').on('change','select',async function(){
        const id=this.dataset.id
        const status= this.value==='启用'?1:0
        //发送请求
        const res =await $.ajax({
            url:'http://localhost:9999/person/status',
            method:'patch',
            data:{id,status},
            headers:{authorization:token}
        })
        // console.log(id);
        // console.log(res);
        if(res.code===1) return alert(res.message)
    })
})